<template>
 <div>
   <el-card>
     <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>项目管理</el-breadcrumb-item>
       <el-breadcrumb-item>提现管理</el-breadcrumb-item>
     </el-breadcrumb></el-card
   >
   <el-card class="box-card">
     <div class="louy marbotm">
       <el-input
         v-model="searchCondition.searchKeyword"
         placeholder="搜索会员账号"
         style="width: 10rem"
         clearable
       ></el-input>
       <el-input
         v-model="searchCondition.searchWithdrawalNumber"
         placeholder="搜索提现单号"
         class="lent"
         style="width: 10rem"
         clearable
       ></el-input>
       <el-input
         v-model="searchCondition.searchCreateTime"
         placeholder="搜索申请的具体时间"
         class="lent"
         style="width: 11rem"
         clearable
       ></el-input>
       <el-input
         v-model="searchCondition.searchStatus"
         placeholder="搜索申请状态"
         style="width: 10rem"
         class="lent"
         clearable
       ></el-input>
       <el-button
         class="iconfont"
         @click="gosaerch"
         style="margin-left: 0.5rem"
         type="success"
         >搜索</el-button
       >
       <el-button @click="refresh" icon="el-icon-refresh" circle></el-button>
       <div style="flex: 1"></div>
       <div style="margin-top: 1rem">
         <el-date-picker
           v-model="searchCondition.searchStartTime"
           type="date"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="开始时间"
         >
         </el-date-picker>
         <el-date-picker
           class="lent"
           v-model="searchCondition.searchEndTime"
           type="date"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="结束时间"
         >
         </el-date-picker>
         <el-button
           class="iconfont"
           @click="searchByTimeRange"
           style="margin-left: 0.5rem"
           type="success"
           >时间范围搜索</el-button
         >
       </div>
     </div>

     <el-table
       :data="tableData"
       @selection-change="onSelectChange"
       height="450"
       :header-cell-style="{ background: '#ebecec80' }"
       style="width: 100%"
       border
     >
       <el-table-column
         prop="user_id"
         label="会员编号"
         width="100"
       ></el-table-column>
       <el-table-column prop="withdrawal_status" label="提现状态" width="100">
         <template slot-scope="scope">
           <!-- 根据不同的状态设置不同的样式 -->
           <span
             :style="{ color: getStatusColor(scope.row.withdrawal_status) }"
             >{{ scope.row.withdrawal_status }}</span
           >
         </template>
       </el-table-column>

       <el-table-column
         prop="withdrawal_id"
         label="提现编号"
         width="100"
       ></el-table-column>
       <el-table-column
         prop="member_name"
         label="会员姓名"
         width="100"
       ></el-table-column>

       <el-table-column
         prop="phoneNumber"
         label="会员账号"
         width="110"
       ></el-table-column>
       <el-table-column
         prop="withdrawal_time"
         label="申请时间"
         width="160"
       ></el-table-column>
       <el-table-column
         prop="withdrawal_number"
         label="提现单号"
         width="170"
       ></el-table-column>
       <el-table-column
         prop="withdrawal_amount"
         label="提现金额"
         fixed="right"
         width="140"
       ></el-table-column>
       <el-table-column
         width="250"
         fixed="right"
         prop="operation"
         label="操作"
       >
         <template slot-scope="scope">
           <el-row>
           
             <el-button
               class="el-icon-edit"
               size="small"
               type="primary"
               @click="pass(scope.row)"
               :disabled="
                 disabledStatuses.includes(scope.row.withdrawal_status)
               "
               >通过</el-button
             >
             <el-button
               class="el-icon-edit"
               size="small"
               type="danger"
               @click="rejectWithdrawal(scope.row)"
               :disabled="
                 disabledStatuses.includes(scope.row.withdrawal_status)
               "
               >拒绝</el-button
             >
           </el-row>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="1"
       :page-sizes="[10, 20, 30, 40]"
       :page-size="size"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
     >
     </el-pagination>
   </el-card>
 </div>
</template>

<script>
import { getwithdrawalbill, passapprove, rejectWithdrawal } from "@/api/account";
// import dialogUser from "./dialogUser.vue";
export default {
 components: {
   // dialogUser: dialogUser,
 },
 data() {
   return {
     tableData: [],
     current: 1,
     size: 10,
     total: 0,
     userName: "",
     pages: 0,
     searchCondition: {
       searchKeyword: "",
       searchWithdrawalNumber: "",
       searchCreateTime: "",
       searchStartTime: "",
       searchEndTime: "",
       searchStatus: "",
     },
     disabledStatuses: ["已通过", "已拒绝"],
   };
 },
 mounted() {
   this.getwithdrawalbill();
 },
 methods: {
  searchByTimeRange() {
   this.getwithdrawalbill(this.searchCondition);
 },
   getStatusColor(status) {
     switch (status) {
       case "已通过":
         return "green"; // 设置已通过状态的颜色为绿色
       case "已拒绝":
         return "red"; // 设置已拒绝状态的颜色为红色
       case "待审核":
         return "orange"; // 设置待审核状态的颜色为橙色
       default:
         return ""; // 默认颜色为空
     }
   },
   async pass(row) {
     const res = await passapprove(row.withdrawal_id);
     if (res.code == 200) {
       this.$message({
         message: res.message,
         type: "success",
       });
       this.getwithdrawalbill();
     } else {
       this.$message({
         message: res.message,
         type: "warning",
       });
     }
   },
   showDialogUpdate(row) {
     this.$router.push({
       path: "/project/modify",
       query: { id: row.projectId },
     });
   },
   gosaerch() {
     this.getwithdrawalbill(this.searchCondition);
   },
   handleCurrentChange(val) {
     console.log(`当前页: ${val}`);
     this.current = val;
     this.getwithdrawalbill();
   },
   handleSizeChange(val) {
     console.log(`每页 ${val} 条`);
     this.size = val;
     this.getwithdrawalbill();
   },
   refresh() {
     this.getwithdrawalbill();
   },
   onSelectChange(sKey) {
     if (sKey.length > 0) {
       /**未知知识 */
       this.ids = sKey.map((item) => item.userId).join();
       console.log(this.ids);
     } else {
       this.ids = [];
     }
     console.log(this.ids);
   },
   async getwithdrawalbill(params) {
     const res = await getwithdrawalbill(this.current, this.size, params);

     if (res.code == 200) {
       this.tableData = res.data.list.records;
       this.current = res.data.list.current;
       this.size = res.data.list.size;
       this.total = res.data.list.total;
       this.pages = res.data.list.pages;
     } else {
       this.$message({
         message: res.message,
         type: "warning",
       });
     }
   },
   async rejectWithdrawal(row) {
     const res = await rejectWithdrawal(row.withdrawal_id);
     if (res.code == 200) {
       this.$message({
         message: res.message,
         type: "success",
       });
       this.getwithdrawalbill();
     } else {
       this.$message({
         message: res.message,
         type: "warning",
       });
     }
   },
 },
};
</script>

<style lang="scss" scoped>
.box-card {
 margin: 1rem;
 width: 98%;
 padding: 6px;
}
.louy {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 flex-wrap: wrap;
 .lent {
   margin-left: 1rem;
 }
}
.marbotm {
 margin-bottom: 1.3rem;
}

::v-deep .el-table thead {
 border-bottom: 1px solid #ddd;
 background-color: #e2e4e6;
}
</style>